import { useEffect, useRef } from "react";
import * as echarts from "echarts";

const LineCharts = () => {
    //获取组件的dom元素
    const chartRef = useRef(null);
    useEffect(() => {
        //创建echarts实例
        let chartInstance = echarts.init(chartRef.current);
        //配置数据
        let option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "shadow",
                },
                textStyle: {
                    color: "#fff",
                    align: "left",
                    fontSize: 14,
                },
                backgroundColor: "rgba(0,0,0,0.8)",
            },
            series: [
                {
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line',
                    smooth: true
                },
                {
                    data: [900, 700, 800, 900, 1290, 1330, 1320],
                    type: 'line',
                    smooth: true
                }
            ]
        };

        //将配置的数据导入到实例中
        chartInstance.setOption(option);
    })
    return <div style={{ alignItems: "center" }}>
        <h2>lineCharts</h2>
        <div ref={chartRef} style={{ height: "400px" }}>
        </div>
    </div>



}

export default LineCharts;